﻿<style>
    .ng-invalid { background-color: lightpink; }
    .ng-valid { background-color: lightgreen; }
    span.error { color: red; font-weight: bold; }
</style>

<h2>Check out now</h2>
<p>Please enter your details, and we'll ship your goods right away!</p>

<form name="shippingForm" novalidate>
    <div class="well">
        <h3>Ship to</h3>
        <div class="form-group">
            <label>Name</label>
            <input name="name" class="form-control"
                   ng-model="data.shipping.name" required />
            <span class="error" ng-show="shippingForm.name.$error.required">
                Please enter a name
            </span>

        </div>

        <h3>Address</h3>

        <div class="form-group">
            <label>Street Address</label>
            <input name="street" class="form-control"
                   ng-model="data.shipping.street" required />
            <span class="error" ng-show="shippingForm.street.$error.required">
                Please enter a street address
            </span>
        </div>

        <div class="form-group">
            <label>City</label>
            <input name="city" class="form-control"
                   ng-model="data.shipping.city" required />
            <span class="error" ng-show="shippingForm.city.$error.required">
                Please enter a city
            </span>
        </div>

        <div class="form-group">
            <label>State</label>
            <input name="state" class="form-control"
                   ng-model="data.shipping.state" required />
            <span class="error" ng-show="shippingForm.state.$error.required">
                Please enter a state
            </span>
        </div>

        <div class="form-group">
            <label>Zip</label>
            <input name="zip" class="form-control"
                   ng-model="data.shipping.zip" required />
            <span class="error" ng-show="shippingForm.zip.$error.required">
                Please enter a zip code
            </span>
        </div>

        <div class="form-group">
            <label>Country</label>
            <input name="country" class="form-control"
                   ng-model="data.shipping.country" required />
            <span class="error" ng-show="shippingForm.country.$error.required">
                Please enter a country
            </span>
        </div>

        <h3>Options</h3>
        <div class="checkbox">
            <label>
                <input name="giftwrap" type="checkbox"
                       ng-model="data.shipping.giftwrap" />
                Gift wrap these items
            </label>
        </div>

        <div class="text-center">
            <button ng-disabled="shippingForm.$invalid"
                    ng-click="sendOrder(data.shipping)"
                    class="btn btn-primary">
                Complete order
            </button>
        </div>
    </div>
</form>
